import { View, Text } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { observer } from 'mobx-react';
import { useEffect, useState } from 'react';
import { getUserPackageList } from '@/service/apis/mine';
import CardInterest2 from './component/CardInterest2';
import './detail.scss';

/**
 * 会员卡详情
 * @returns
 */
const VipCardDetail = () => {
  const [list, setList] = useState([]);
  const [date, setDate] = useState('');
  const [cardId, setCardId] = useState('');
  useEffect(() => {
    getDetail();
  }, []);

  const getDetail = async () => {
    try {
      const { data } = await getUserPackageList();
      setList(data.list);
      setDate(data.expire_time);
      setCardId(data.card_id);
    } catch (err) {
      Taro.showToast({
        title: err?.message,
        icon: 'none',
      });
    }
  };
  return (
    <View className="vipcard-detail-container2">
      <View className="card-top-wrap">
        <View className="card-top">
          <View className="vip-card-wrap">
            <Text className="card-title">趣驿站会员卡</Text>
            <View className="shop-info">
              <Text>会员卡号：{cardId}</Text>
            </View>
            <Text className="date-line">有效期：{date}</Text>
          </View>
          {/* <View className="card-price-wrap">
            <Text className="card-title">年费</Text>
            <Text className="card-price">￥99.00</Text>
          </View> */}
        </View>
      </View>
      <CardInterest2 list={list} />
    </View>
  );
};
export default observer(VipCardDetail);
